<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Events test</title>

  <link rel="stylesheet" href="../../../demo/demo.css"/>

  <script src="../../../dist/jquery.js"></script>
  <script src="../../../dist/jquery-ui.js"></script>
  <script src="../../../src/gridstack.js"></script>
  <script src="../../../src/gridstack.jQueryUI.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Events test</h1>
    <div><a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a></div>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    var grid = GridStack.init({float: true});
    var count = 0;

    function addWidget() {
      grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content"><button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>'
        + count++ + '</div></div>');
    };

    grid.on('added removed change', function(e, items) {
      var str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    grid.on('disable', function(event) {
      var grid = event.target;
      console.log('disable');
    });

    grid.on('dragstart', function(event, ui) {
      var grid = this;
      var el = event.target;
      console.log('dragStart ' + el.textContent);
    });

    grid.on('dragstop', function(event, ui) {
      var grid = this;
      var el = event.target;
      console.log('dragstop ' + el.textContent);
    });

    grid.on('dropped', function(event, previousWidget, newWidget) {
      console.log('dropped - Removed widget that was dragged out of grid:', previousWidget);
      console.log('dropped - Added widget in dropped grid:', newWidget);
    });

    grid.on('enable', function(event) {
      var grid = event.target;
      console.log('enable');
    });

    grid.on('resizestart', function(event, ui) {
      var grid = this;
      var el = event.target;
      var w = el.getAttribute('data-gs-width');
      var h = el.getAttribute('data-gs-height');
      console.log('resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
    });

    grid.on('resizestop', function(event, ui) {
      // HAPPENS BEFORE we get to update our attr - SKIP
      var el = event.target;
      var w = el.getAttribute('data-gs-width');
      var h = el.getAttribute('data-gs-height');
      console.log('JQ resizestop ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
    });

    grid.on('gsresizestop', function(event, el) {
      var w = el.getAttribute('data-gs-width');
      var h = el.getAttribute('data-gs-height');
      console.log('gsresizestop ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
    });

    addWidget();

    // jQuery-ui event on '.grid-stack-item' propagates up
    grid.on('resize', function(event, ui) {
      var el = event.target;
      // console.log('resize size: (' + el.clientWidth + ' x ' + el.clientHeight + ')');
    });

  </script>
</body>
</html>
